import React, {useState,useRef} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import {Button, Form, Input, Select, Upload,message,Row, Col,Checkbox  } from 'antd';
import {
  StepsForm,
  ProFormText,
  ProFormSelect,
  ProFormUploadButton,
  ProFormRadio,
  ProFormCheckbox
} from '@ant-design/pro-form';
//import Editor from './components/Editor'   //编辑器
import { LeftOutlined, CloudUploadOutlined, CameraFilled, PlusOutlined  } from '@ant-design/icons';
import './AddGoods.css'

import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
import  {
  ProFormDigit

} from '@ant-design/pro-form';

import Editor from "@/pages/ManageGoods/components/Editor";
import AddStandard from "@/pages/ManageGoods/components/AddStandard";

const AddGoods = () => {
  const { Option } = Select;
  const handleChange = (value) =>{
    console.log(`selected ${value}`);
  }


  const [form] = Form.useForm();
  const formRef = useRef();
  const [radioValue, setRadioValue] = useState('deliver')
  const [checkBoxValue, setCheckBoxValue] = useState('')
  const [isModalVisible, setIsModalVisible] = useState(false);

  const [show, isShow] = useState(true);   //显示隐藏
  const [switchs,isSwitch] = useState(true); //

  const defaultData: DataSourceType[] = new Array(1).fill(1).map((_, index) => {
    return {
      id: (Date.now() + index).toString(),
      title: `活动名称${index}`,
      decs: '',
      state: '0',
      created_at: '2020-05-26T09:42:56Z',
    };
  });
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
    defaultData.map((item) => item.id),
  );
  const [dataSource, setDataSource] = useState(() => defaultData);


  const addData = [
    {
    },
  ]


  const columns: ProColumns[] = [
    {
      title: '图片',
      dataIndex: 'image',
      search: false,
      width: 150,
      align: 'center',
      render: (_, record) => [
        <ProFormUploadButton
          title=''
          icon={<CameraFilled style={{fontSize:'20px',color:'#c2bfbf'}}/>}
          max={1}
          fieldProps={{
            name: 'file',
            listType: 'picture',
          }}
          action="/upload.do"
        />
      ]
    },
    {
      title: '售价',
      width: 300,
      align: 'center',
      render: (_, record) => [
        <ProFormDigit
          min={1}
          placeholder='0'
        />
      ]
    },
    {
      title: '成本价',
      dataIndex: 'Billing',
      width: 300,
      align: 'center',
      render: (_, record) => [
        <ProFormDigit
          min={0}
          placeholder='0'
        />
      ]
    },
    {
      title: '原价',
      dataIndex: 'shipping',
      align: 'center',
      width: 300,
      render: (_, record) => [
        <ProFormDigit
          min={0}
          placeholder='0'
        />
      ]
    },
    {
      title: '库存',
      dataIndex: 'shipping',
      align: 'center',
      width: 300,
      render: (_, record) => [
        <ProFormDigit
          placeholder='0'
          min={0}
        />
      ]
    },
    {
      title: '商品编号',
      align: 'center',
      width: 300,
      valueType: 'option',
      render: (_, record) => [
        <ProFormText name="text" placeholder={'请输入商品编号'}/>
      ]
    },
    {
      title: '重量(KG)',
      dataIndex: 'shipping',
      width: 300,
      align: 'center',
      render: (_, record) => [
        <ProFormDigit
          placeholder='0'
          min={0}
        />
      ]
    },
    {
      title: '体积(m³)',
      dataIndex: 'shipping',
      width: 300,
      align: 'center',
      render: (_, record) => [
        <ProFormDigit
          placeholder='0'
          min={0}
        />
      ]
    },
  ];


  const column1: ProColumns[] = [
    {
      title: '图片',
      dataIndex: 'image',
      search: false,
      width: 150,
      align: 'center',
      render: (_, record) => [
        <ProFormUploadButton
          title=''
          icon={<CameraFilled style={{fontSize:'20px',color:'#c2bfbf'}}/>}
          max={1}
          fieldProps={{
            name: 'file',
            listType: 'picture',
          }}
          action="/upload.do"
        />
      ]
    },
    {
      title: '售价',
      width: 300,
      align: 'center',
      render: (_, record) => [
       <span>0</span>
      ]
    },
    {
      title: '成本价',
      dataIndex: 'Billing',
      width: 300,
      align: 'center',
      render: (_, record) => [
        <span>0</span>
      ]
    },
    {
      title: '原价',
      dataIndex: 'shipping',
      align: 'center',
      width: 300,
      render: (_, record) => [
        <span>0</span>
      ]
    },
    {
      title: '一级返佣',
      dataIndex: 'shipping',
      width: 150,
      align: 'center',
      render: (_, record) => [
        <ProFormDigit
          placeholder='0'
          min={0}
        />
      ]
    },
    {
      title: '二级返佣',
      dataIndex: 'shipping',
      width: 150,
      align: 'center',
      render: (_, record) => [
        <ProFormDigit
          placeholder='0'
          min={0}
        />
      ]
    },
  ];


  const column2: ProColumns[] = [
    {
      title: '图片',
      dataIndex: 'image',
      search: false,
      width: 150,
      align: 'center',
      render: (_, record) => [
        <ProFormUploadButton
          title=''
          icon={<CameraFilled style={{fontSize:'20px',color:'#c2bfbf'}}/>}
          max={1}
          fieldProps={{
            name: 'file',
            listType: 'picture',
          }}
          action="/upload.do"
        />
      ]
    },
    {
      title: '售价',
      width: 300,
      align: 'center',
      render: (_, record) => [
        <span>0</span>
      ]
    },
    {
      title: '成本价',
      dataIndex: 'Billing',
      width: 300,
      align: 'center',
      render: (_, record) => [
        <span>0</span>
      ]
    },
    {
      title: '原价',
      dataIndex: 'shipping',
      align: 'center',
      width: 300,
      render: (_, record) => [
        <span>0</span>
      ]
    },
    {
      title: '会员价',
      dataIndex: 'shipping',
      width: 150,
      align: 'center',
      render: (_, record) => [
        <ProFormDigit
          placeholder='0'
          min={0}
        />
      ]
    },
  ];


  return (
      <PageContainer
        extra={<Button icon={<LeftOutlined /> } href={'goodsLists'}>返回</Button>}
        header={{
          title: '添加商品',
          breadcrumb: {},
        }}
      >

        <ProCard>
          <StepsForm
            <{
            name: string;
          }>
            formRef={formRef}
            onFinish={async () => {

              message.success('提交成功');
            }}
            formProps={{
              validateMessages: {
                required: '此项为必填项',
              },
            }}
          >
            <StepsForm.StepForm<{
              name: string;
            }>
              name="base"
              title="商品信息"
              onFinish={async () => {
                console.log(formRef.current?.getFieldsValue());
                return true;
              }}
            >
                <Form.Item
                  name="shopname"
                  label="商品名称 :"
                  wrapperCol={{ span: 12 }}
                  /*rules={[{ required: true, message: '商品名称不能为空!' }]}*/
                >
                  <Input placeholder="请输入商品名称"/>
                </Form.Item>
                <Form.Item
                  label="商品分类 :"
                  name="select"
                  wrapperCol={{ span: 12 }}
                  /*rules={[{ required: true, message: '请选择商品分类!' }]}*/
                >
                  <Select
                    mode="multiple"
                    style={{ width: '100%' }}
                    placeholder="请选择"
                    onChange={handleChange}
                    optionLabelProp="label"
                  >
                    <Option value="china" label="China">
                      <div className="demo-option-label-item">
                      <span role="img" aria-label="China">
                        🇨🇳
                      </span>
                        China (中国)
                      </div>
                    </Option>
                    <Option value="usa" label="USA">
                      <div className="demo-option-label-item">
                      <span role="img" aria-label="USA">
                        🇺🇸
                      </span>
                        USA (美国)
                      </div>
                    </Option>
                    <Option value="japan" label="Japan">
                      <div className="demo-option-label-item">
                      <span role="img" aria-label="Japan">
                        🇯🇵
                      </span>
                        Japan (日本)
                      </div>
                    </Option>
                    <Option value="korea" label="Korea">
                      <div className="demo-option-label-item">
                      <span role="img" aria-label="Korea">
                        🇰🇷
                      </span>
                        Korea (韩国)
                      </div>
                    </Option>
                  </Select>
                </Form.Item>
              <Form.Item
                label="商品关键字 :"
                name="keyword"
                wrapperCol={{ span: 12 }}
              >
                <Input placeholder="请输入商品关键字"/>
              </Form.Item>
              <Form.Item
                label="单位 :"
                name="danwei"
                wrapperCol={{ span: 12 }}
                /*rules={[{ required: true, message: '请输入单位' }]}*/
              >
                <Input placeholder="请输入单位"/>
              </Form.Item>
              <Form.Item
                label="商品简介 :"
                wrapperCol={{ span: 12 }}
                name="jianjie"
                rules={[{ message: '请输入商品简介' }]}
              >
                <Input.TextArea placeholder="请输入商品简介"/>
              </Form.Item>
              <Form.Item
                label="商品封面图 :"
                wrapperCol={{ span: 12 }}
                name="images"
              >
                <ProFormUploadButton
                  title=''
                  icon={<CameraFilled style={{fontSize:'20px',color:'#c2bfbf'}}/>}
                  max={1}
                  fieldProps={{
                    name: 'file',
                    listType: 'picture',
                  }}
                  action="/upload.do"
                  extra="345*345"
                />
              </Form.Item>
              <Form.Item
                label="商品推荐图 :"
                wrapperCol={{ span: 12 }}
                name="tuijian"

              >
                <ProFormUploadButton
                  title=''
                  icon={<CameraFilled style={{fontSize:'20px',color:'#c2bfbf'}}/>}
                  max={1}
                  fieldProps={{
                    name: 'file',
                    listType: 'picture',
                  }}
                  action="/upload.do"
                />

              </Form.Item>
              <Form.Item
                label="商品轮播图 :"
                wrapperCol={{ span: 12 }}
                name="banner"
              >
                <ProFormUploadButton
                  title=''
                  icon={<CameraFilled style={{fontSize:'20px',color:'#c2bfbf'}}/>}
                  max={10}
                  fieldProps={{
                    name: 'file',
                    listType: 'picture',
                  }}
                  action="/upload.do"
                  extra="最多10张 750*750"
                />

              </Form.Item>
              <Form.Item
                label="主图视频 :"
                name="video"
                wrapperCol={{ span: 12 }}
                rules={[{ message: '请输入视频链接' }]}
              >
                <div style={{display: 'flex'}}>
                  <Input placeholder="请输入视频连接"/>
                  <Upload>
                    <Button icon={<CloudUploadOutlined />} type="primary" style={{ marginLeft:'20px'}}>上传视频</Button>
                  </Upload>
                </div>
              </Form.Item>
              <Form.Item
                label="商品规格 :"
                wrapperCol={{ span: 22 }}
                name="guige"
              >
                <ProFormRadio.Group
                  name="radiogroup"
                  label=""
                  initialValue={'deliver'}  //默认值
                  fieldProps={{  //
                    onChange: ({target}) => {
                      setRadioValue(target.value)
                    }
                  }}
                  options={[
                    {
                      label: '单规格',
                      value: 'deliver',
                    },
                    {
                      label: '多规格',
                      value: 'delivery',
                    }
                  ]}
                />
                <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.radiogroup !== curValues.radiogroup}
                >
                  {(forminstance) => {
                    switch (forminstance.getFieldValue('radiogroup')) {
                      case 'deliver':
                        return (
                          <ProTable
                            bordered
                            columns={columns}
                            tableAlertOptionRender={false}
                            editable={{
                              type: 'multiple',
                            }}
                            dataSource={addData}
                            rowKey="id"
                            options={false}
                            search={false}
                            pagination={false}
                            dateFormatter="string"
                          />

                        );
                        break;
                      case 'delivery':
                        return (
                          <div>
                            <div style={{display: 'flex'}}>
                              <ProFormSelect
                                width='sm'
                                name="select"
                                label="选择规格"
                                valueEnum={{
                                  open: '未解决',
                                  closed: '已解决',
                                }}
                              />

                              <Button type="primary" onClick={() => isShow(!show)}>确认</Button>
                              <Button style={{marginLeft:'20px'}}   onClick={() =>{setIsModalVisible(true)}}
                              >添加规格模板</Button>
                            </div>
                            <div hidden={show} style={ switchs ? { display:'block'} : {display:'none'} } >
                              <Button type="primary" icon={<PlusOutlined />} onClick={()=>{isSwitch(!switchs)}}>添加新规格</Button>
                              <Button type="primary" style={{marginLeft:'20px'}}>立即生成</Button>
                            </div>

                            <div hidden={switchs}>
                              <Form.Item
                                wrapperCol={{ span: 12 }}
                                label="规格"
                                name="username"
                                rules={[{ message: 'Please input your username!' }]}
                              >
                                <Input />
                              </Form.Item>
                              <Form.Item
                                wrapperCol={{ span: 12 }}
                                label="规格值"
                                name="username"
                                rules={[{ message: 'Please input your username!' }]}
                              >
                                <Input />
                              </Form.Item>
                              <div style={{ display: 'flex'}}>
                                <Button type="primary">确定</Button>
                                <Button style={{marginLeft:'20px'}} onClick={()=>{isSwitch(!switchs)}}>取消</Button>
                              </div>
                            </div>
                          </div>
                        );
                        break;
                    }
                  }}
                </Form.Item>
              </Form.Item>
              <Form.Item
                label="运费模板 :"
                labelCol={{ span: 2}}
                wrapperCol={{ span: 10 }}
                name="muban"
              >
                <div style={{display: 'flex'}}>
                  <Select onChange={handleChange}>
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                  </Select>
                  <Button style={{ marginLeft:'20px'}}>添加运费模板</Button>
                </div>
              </Form.Item>
              <Form.Item
                label="关联用户标签 :"
                wrapperCol={{ span: 12 }}
                name="user"
                hasFeedback
                rules={[{ message: '请选择商品分类' }]}
              >
                <Select
                  mode="multiple"
                  style={{ width: '100%' }}
                  placeholder="请选择"
                  onChange={handleChange}
                  optionLabelProp="label"
                >
                  <Option value="china" label="China">
                    <div className="demo-option-label-item">
                      <span role="img" aria-label="China">
                        🇨🇳
                      </span>
                      China (中国)
                    </div>
                  </Option>
                  <Option value="usa" label="USA">
                    <div className="demo-option-label-item">
                      <span role="img" aria-label="USA">
                        🇺🇸
                      </span>
                      USA (美国)
                    </div>
                  </Option>
                  <Option value="japan" label="Japan">
                    <div className="demo-option-label-item">
                      <span role="img" aria-label="Japan">
                        🇯🇵
                      </span>
                      Japan (日本)
                    </div>
                  </Option>
                  <Option value="korea" label="Korea">
                    <div className="demo-option-label-item">
                      <span role="img" aria-label="Korea">
                        🇰🇷
                      </span>
                      Korea (韩国)
                    </div>
                  </Option>
                </Select>
              </Form.Item>
            </StepsForm.StepForm>
            <StepsForm.StepForm<{
              checkbox: string;
            }>
              name="checkbox"
              title="商品详情"
              onFinish={async () => {
                console.log(formRef.current?.getFieldsValue());
                return true;
              }}
            >

              <Form.Item
                label="商品详情 :"
                name="username"
              >
                <Editor/>
              </Form.Item>
            </StepsForm.StepForm>
            <StepsForm.StepForm
              name="time"
              title="其他设置"
            >
              <Row style={{display: 'flex', justifyContent:'space-around'}}>
                <Col span={6}>
                  <Form.Item
                    name="xuni"
                    label="虚拟销量 :"
                    /*rules={[{ required: true, message: '商品名称不能为空!' }]}*/
                  >
                    <ProFormDigit name="sales-number" min={0}/>
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="赠送积分 :"
                    name="integral"
                  >
                    <ProFormDigit name="integral-number" min={0}/>
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="排序 :"
                    name="sort"
                  >
                    <ProFormDigit name="sort-number" min={0}/>
                  </Form.Item>
                </Col>
              </Row>
              <Row>
              <Col span={24} offset={1}>
                  <Form.Item
                    label="单独设置 :"
                    name="username"
                    wrapperCol={{ span: 22 }}
                  >
                    <ProFormRadio.Group
                      name="radiogroup"
                      label=""
                      //initialValue={'deliver'}  //默认值
                      fieldProps={{  //
                        onChange: ({target}) => {
                          setCheckBoxValue(target.value)
                        }
                      }}
                      options={[
                        {
                          label: '佣金设置（数字即返佣金额）',
                          value: 'commission',
                        },
                        {
                          label: '付费会员价',
                          value: 'vipprice',
                        }
                      ]}
                    />
                    <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.radiogroup !== curValues.radiogroup}
                    >
                      {(forminstance) => {
                        switch (forminstance.getFieldValue('radiogroup')) {
                          case 'commission':
                            return (
                            <Col span={24}>
                              <Form.Item
                                label="商品属性 :"
                                name="goodsrname"
                              >
                              <ProTable
                                bordered
                                columns={column1}
                                tableAlertOptionRender={false}
                                editable={{
                                  type: 'multiple',
                                }}
                                dataSource={addData}
                                rowKey="id"
                                options={false}
                                search={false}
                                pagination={false}
                                dateFormatter="string"
                              />
                              </Form.Item>
                              </Col>
                            );
                            break;
                          case 'vipprice':
                            return (
                              <Col span={24}>
                                <Form.Item
                                  label="商品属性 :"
                                  name="goodsrname"
                                >
                                  <ProTable
                                    bordered
                                    columns={column2}
                                    tableAlertOptionRender={false}
                                    editable={{
                                      type: 'multiple',
                                    }}
                                    dataSource={addData}
                                    rowKey="id"
                                    options={false}
                                    search={false}
                                    pagination={false}
                                    dateFormatter="string"
                                  />
                                </Form.Item>
                              </Col>
                            );
                            break;
                        }
                      }}
                    </Form.Item>
                  </Form.Item>
                </Col>
              </Row>

              <Row style={{display: 'flex', justifyContent:'space-around'}}>
                <Col span={6}>
                  <Form.Item
                    name="zhuangtai"
                    label="商品状态 :"
                  >
                    <ProFormRadio.Group
                      name="radiogroups"
                      initialValue={'offTheShelf'}
                      options={[
                        {
                          label: '上架',
                          value: 'putOnShelf',
                        },
                        {
                          label: '下架',
                          value: 'offTheShelf',
                        }
                      ]}
                    />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="热卖单品 :"
                    name="integral"
                  >
                    <ProFormRadio.Group
                      name="danpin"
                      initialValue={'closes'}
                      options={[
                        {
                          label: '开启',
                          value: 'opens',
                        },
                        {
                          label: '关闭',
                          value: 'closes',
                        }
                      ]}
                    />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="促销单品 :"
                    name="cuxiaoing"
                  >
                    <ProFormRadio.Group
                      name="radiogrou"
                      initialValue={'closing'}
                      options={[
                        {
                          label: '开启',
                          value: 'opening',
                        },
                        {
                          label: '关闭',
                          value: 'closing',
                        }
                      ]}
                    />
                  </Form.Item>
                </Col>
              </Row>

              <Row style={{display: 'flex', justifyContent:'space-around'}}>
                <Col span={6}>
                  <Form.Item
                    label="精品推荐 :"
                    name="boutique"
                  >
                    <ProFormRadio.Group
                      name="radios"
                      initialValue={'kaiQi'}
                      options={[
                        {
                          label: '开启',
                          value: 'kaiQi ',
                        },
                        {
                          label: '关闭',
                          value: 'guanBi',
                        }
                      ]}
                    />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="首发新品 :"
                    name="integral"
                  >
                    <ProFormRadio.Group
                      name="shoufa"
                      initialValue={'starting'}
                      options={[
                        {
                          label: '开启',
                          value: 'starting',
                        },
                        {
                          label: '关闭',
                          value: 'startings',
                        }
                      ]}
                    />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item
                    label="优品推荐 :"
                    name="recommend"
                  >
                    <ProFormRadio.Group
                      name="youPin"
                      initialValue={'super'}
                      options={[
                        {
                          label: '开启',
                          value: 'super ',
                        },
                        {
                          label: '关闭',
                          value: 'supers',
                        }
                      ]}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={24} offset={1}>
                  <Form.Item
                    label="赠送优惠券 :"
                    name="boutique"
                  >
                    <Button type="primary">
                      添加优惠券
                    </Button>
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={8} offset={1}>
                  <Form.Item
                    label="商品口令 :"
                    name="boutique"
                  >
                    <ProFormText name="text" placeholder="请输入商品口令" />
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={8} offset={1} >
                  <Form.Item
                    label="配送方式 :"
                    name="boutique"
                    style={{ display: 'flex'}}
                  >
                    <Checkbox defaultChecked disabled />  快递 :
                    <ProFormCheckbox.Group
                      name="checkbox"
                      options={[
                        {
                          label: '门店配送',
                          value: 'supers',
                        },
                        {
                          label: '到店自提',
                          value: 'supers',
                        }
                      ]}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </StepsForm.StepForm>
          </StepsForm>
        </ProCard>

        <AddStandard
          isModalVisible={isModalVisible}
            handleCancel={()=>{
            setIsModalVisible(false)
          }
        }
        />
      </PageContainer>
  );
};

export default AddGoods;
